<template>
<div class="list-s">
  <el-row :gutter="12">
  <el-col :span="12"><div class="grid-content bg-purple-l"><span class="dai">待发货</span>
  <span class="dan">635单</span><el-badge is-dot class="item">新消息提醒</el-badge></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-r"><span class="dai">待收款</span>
  <span class="dan">235单</span><el-badge is-dot class="item">新消息提醒</el-badge></div></el-col>
  </el-row>
  <el-row :gutter="12">
  <el-col :span="12"><div class="grid-content bg-purple-ll"><span class="dai">待收货</span>
  <span class="dan">211单</span><el-badge is-dot class="item">新消息提醒</el-badge></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-rr"><span class="dai">待反馈</span>
  <span class="dan">769单</span><el-badge is-dot class="item">新消息提醒</el-badge></div></el-col>
  </el-row>
</div>

  <div class="date">
    <el-calendar v-model="datetime">
    </el-calendar>
  </div>
  <el-table  border :data="tableData" style="width: 60%">
      <el-table-column type="index" label="序号" width="160" align="center">
    </el-table-column>
    <el-table-column  prop="orderSn" label="交易商品" width="160" align="center">
    </el-table-column> 
    <el-table-column  prop="orderName" label="买家" width="160" align="center">
    </el-table-column>
    <el-table-column  prop="num" label="数量" width="160" align="center">
    </el-table-column>
      <el-table-column prop="price" label="金额"  align="center">
    </el-table-column>
  </el-table>

</template>

<script>
  import axios from 'axios'; 
  export default {
    data() {
      return {
      datetime: new Date(),
      listQuery: {
        params: "",
      },
      tableData: [],
    };
    },
    created() {
    this.getPage();
  },
  methods: {
    getPage() {
      axios
        .post("http://localhost:9999/orderss", this.listQuery)
        .then((res) => {
          this.tableData = res.data.data.orderss;
 });
},
},
 };
</script>
<style>
.date{
    margin-top: 0px;
    width: 38%;
    float:right;  
}
.list-s{
    width: 60%;
    float: left;
}
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-l {
    background:orangered;
  }
   .bg-purple-r {
    background:green;
  }
    .bg-purple-ll {
    background:blue;
  }
   .bg-purple-rr {
    background:orange;
  }
  .grid-content {
    
    border-radius: 4px;
    height: 150px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .dai{
    margin: 10px;
    color: rgb(250, 242, 242);
  }
  .dan{
    position: absolute;
    align-content: center;
    font-size: xx-large;
    color: white;
    font-weight: 400;
    margin:50px;
    margin-left: 80px;
  }
  .item{
    position: absolute;
    color: yellow;
    margin:233px;
    margin-top: 5px;
    margin-right: 0px;
  }
</style>
